<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="css/upload.css" rel='stylesheet'>
    <link href="css/common.css" rel='stylesheet'>
    <link href="css/login.css" rel="stylesheet">


    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <!-- ele 的引入放在vue下面-->
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<!--    <script src="js/index.js"></script>-->
    <script src="js/common.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            border: 1px solid #ccc;
            padding: 5px;
            min-height: 40px;
            align-items: center;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            flex-grow: 1; /* 让标签区域可以扩展以填充可用空间 */
        }

        .tag {
            background-color: #e0e0e0;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 2px 5px;
            display: flex;
            align-items: center;
            margin-right: 5px; /* 添加一些右边距以分隔标签和输入框 */
        }

        .tag span {
            margin-right: 5px;
        }

        .tag button {
            background: none;
            border: none;
            cursor: pointer;
            color: red;
            font-size: 12px;
        }

        #inputBox {
            border: none;
            outline: none;
            flex-shrink: 0; /* 防止输入框缩小 */
            min-width: 50px;
        }
        #tags{
            display: flex;
            flex-wrap: wrap;
        }
    </style>

</head>
<body>
<div id="app">
   <common @logined="logined"></common>
    <div class="container">
        <!-- 左侧导航 -->
        <div class="left-nav">
<!--            <div class="nav-section">-->
<!--                <h2>创作中心</h2>-->
<!--                <ul>-->
<!--                    <li>首页</li>-->
<!--                    <li>内容管理</li>-->
<!--                    <li>数据中心</li>-->
<!--                    <li>粉丝管理</li>-->
<!--                    <li>互动管理</li>-->
<!--                    <li>收益管理</li>-->
<!--                    <li>创作成长</li>-->
<!--                    <li>任务成就</li>-->
<!--                    <li class="highlight">必火推广</li>-->
<!--                    <li>创作学院</li>-->
<!--                    <li>创作权益</li>-->
<!--                    <li>创作实验室</li>-->
<!--                </ul>-->
<!--            </div>-->

            <div class="nav-section">
                <h2>投稿类型</h2>
                <ul>
                    <li class="highlight">视频投稿</li>
                    <li @click="TODO()">短剧投稿</li>
                    <li @click="TODO()">专栏投稿</li>
                    <li @click="TODO()">互动视频投稿</li>
                    <li @click="TODO()">音频投稿</li>
                    <li @click="TODO()">贴纸投稿</li>
                    <li @click="TODO()">视频素材投稿</li>
                </ul>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content">
            <!-- 上传区域 -->
            <div class="upload-area" ref="uploadArea">
               <template v-if="!form.path">
                   <p>拖拽到此处也可上传</p>

                   <div class="upload-container">
                       <input
                               type="file"
                               name="file"
                               class="file-input"
                               id="fileInput"
                               multiple
                               @change="uploads"
                       >
                       <br><br>
                       <label for="fileInput" class="upload-btn">上传视频</label>
                   </div>

                   <p v-show="percent > 0" style="margin-top: 30px">{{'视频上传进度'+percent + '%'}}</p>
               </template>
                <template v-else="">
                    <video ref="videoPlayer" :src="form.path" class="edVideo" autoplay controls></video>
                    <br>
                    <button @click="clearVideo" style="margin-top: 30px;border: unset;width: 100px;height: 50px;background-color: skyblue;">清除视频</button>
                </template>
            </div>
            <p style="color: red; text-align: center">离开页面后，视频数据将会保存</p>
            <div>
                <el-form v-if="IsShowForm" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm" ref="form" @submit.native.prevent>
                    <el-form-item label="视频标题" prop="vname">
                        <el-input v-model="form.vname"></el-input>
                    </el-form-item>
                    <el-form-item label="视频封面" prop="src">
                        <div v-if="form.imageurl == ''">
                            <input
                                   type="file"
                                   name="file"
                                   class="file-input"
                                   id="image"
                                   @change="upload"
                            >
                            <label for="image" class="upload-btn">上传视频封面</label>
                        </div>

                        <el-image v-else
                                style="width: 150px; height: 150px"
                                :src="form.imageurl"
                                fit="contain">

                        </el-image>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="form.type">
                            <el-radio label="自制"></el-radio>
                            <el-radio label="转载"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="视频分区" prop="categ">
                        <el-select v-model="form.categ"  placeholder="请选择区域">
                            <el-option :label="item.bname" :value="item.id" v-for="(item, id) in board"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="视频标签" prop="tag" id="tagContainer">
                        <div class="tag-container" id="tagContainer">
                            <div id="tags">
                                <div v-for="(tag, index) in tags" :key="index" class="tag">
                                    <span>{{ tag }}</span>
                                    <button @click="removeTag(index)">x</button>
                                </div>
                            </div>
                            <input class="el-input__inner"  placeholder="按回车创建标签" ref="inputBox" v-model="form.tag" @keyup.enter="handleEnter"></input>
                        </div>
                    </el-form-item>
                    <el-form-item label="视频简介" prop="intro">
                        <el-input type="textarea" v-model="form.intro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="videoUpload()">立即创建</el-button>
                        <el-button @click="resetForm('form')" type="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 快捷入口 -->
            <div class="quick-access">
                <ul>
                    <li><span class="highlight">bilibili投稿快捷方式</span></li>
                    <li>保存bilibili投稿入口到桌面，界面更简单，加载更快捷</li>
                </ul>
            </div>

            <div class="quick-access">
                <ul>
                    <li><span class="highlight">必剪桌面端</span></li>
                    <li>一键字幕，完成素材，全屏编辑，支持一键编辑</li>
                </ul>
            </div>

            <!-- 下载区 -->
            <div class="download-section">
                <button class="upload-btn" @click="location.href = 'https://bcut.bilibili.cn/'">立即下载</button>
            </div>
        </div>
    </div>


</div>

</body>
<script>

    var v = new Vue({
        el : "#app",
        data : {
            percent: "",
            form:{
                path:"",
                imageurl:"",
                intro:"",
                tag:"",
                type:"",
                categ:"",
                vname:"",
            },
            tags: [], // 用于存储标签的数组
            rules: {
                imageurl: [
                    { required: true, message: '请选择视频封面', trigger: 'blur' }

                ],
                intro: [
                    { required: true, message: '请填写视频简介', trigger: 'change' }
                ],
                tag: [
                    { required: true, message: '请添加视频标签', trigger: 'change' }
                ],
                categ: [
                    { required: true, message: '请选择视频分区', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择视频类型', trigger: 'change' }
                ],
                vname: [
                    { required: true, message: '请填写视频标题', trigger: 'change' }
                ]
            },
            myinfo:{},
            IsShowForm: false, // 视频表单
            board:{}
        },
        created() {
            if(sessionStorage.getItem("video")){
                this.form.path = sessionStorage.getItem("video")
                this.IsShowForm = true;
            }

            // axios.get("b-user/login/myinfo").then(res=>this.myinfo = res.data.data)
            axios.get("board/getBoard").then(res=>this.board = res.data)
        },
        methods : {

            TODO(){
                this.$message({type: 'info', message: '功能开发中'});
            },
            logined(myinfo){
                this.myinfo = myinfo;
            },
            // 视频上传
            uploads(){
                // 获取用户选择的文件列表（FileList 对象）
                const files = event.target.files;
                if (files.length === 0) return;
                if (files.length > 1){
                    this.$message("只能上传一个视频")
                    return
                }

                const formData = new FormData();
                formData.append('file', files[0]); // ✅ 附加单个文件
                // formData.append('type', 'video');  // ✅ 直接使用 FormData 添加字段
                axios.post("b-user/upload/uploadVideoToCos", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data' // ✅ 明确设置请求头
                    },
                    timeout: 300000, // 5 分钟超时（单位：毫秒）
                    onUploadProgress: (progressEvent) => {
                        this.percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);

                    }
                }).then(res=>{
                    this.form.path = res.data.data;
                    this.$message(res.data.msg)
                    sessionStorage.setItem("video", this.form.path)
                    this.IsShowForm = true

                })
            },
            // 封面上传
            upload(){
                const files = event.target.files;
                if (files.length === 0) return;
                if (files.length > 1){
                    this.$message("只能上传一个图片")
                    return
                }

                const formData = new FormData();
                formData.append('file', files[0]); // ✅ 附加单个文件
                formData.append('type', 'image');  // ✅ 直接使用 FormData 添加字段
                axios.post("upload/upload", formData
                ).then(res=>{
                    this.form.imageurl = res.data.data;
                    this.$message(res.data.msg)

                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            videoUpload(){
                const video = {
                    vname: this.form.vname,
                    tag: this.tags.join(";"),
                    type: this.form.type,
                    bid: this.form.categ,
                    intro: this.form.intro,
                    image: this.form.imageurl,
                    uid: this.myinfo.id,
                    id: null,
                    time: null,
                    path: this.form.path,
                    videoLength: this.$refs.videoPlayer.duration

                }
                axios.post("b-user/upload/videoUpload", video).then(res=>{
                    if(res.data > 0){
                        this.IsShowForm = false;
                        this.form.path = ""
                        this.percent = 0
                        this.form.imageurl = ""
                        this.form.intro = ""
                        this.form.tag = ""
                        this.form.type = ""
                        this.form.categ = ""
                        this.form.vname = ""
                        this.tags = []
                        sessionStorage.removeItem("video")
                        this.$message("上传成功，等待审核")
                    }
                })
            },
            clearVideo(){
                sessionStorage.removeItem("video");
                this.IsShowForm = false;
                this.form.path = ""
                this.$message("清除成功")
            },

            handleEnter() {
                const tagValue = this.form.tag.trim();
                if (tagValue != '') {
                    console.log(this.tags, tagValue)
                    this.tags.push(tagValue); // 将新标签添加到标签数组中
                    console.log(this.tags)
                    this.form.tag = ''; // 清空输入框
                }
                const inputBox = this.$refs.inputBox;
                inputBox.focus();
                console.log(this.tags);
            },
            removeTag(index) {
               // this.tags.splice(index, 1); // 从标签数组中移除指定索引的标签
            },

        },

        mounted(){
            // 拖拽上传功能
            const uploadArea = this.$refs.uploadArea;

            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.style.backgroundColor = '#f8f9fa';
            });

            uploadArea.addEventListener('dragleave', () => {
                uploadArea.style.backgroundColor = 'white';
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.style.backgroundColor = 'white';
                const files = e.dataTransfer.files;
                if(files.length > 0) {
                    // console.log('拖拽文件：', files);
                    alert(`通过拖拽选择 ${files.length} 个文件`);
                }
                // 获取用户选择的文件列表（FileList 对象）
                console.log(files)
                if (files.length === 0) return;

                const formData = new FormData();
                formData.append('file', files[0]); // ✅ 附加单个文件
                // formData.append('type', 'video');  // ✅ 直接使用 FormData 添加字段
                axios.post("b-user/upload/uploadVideoToCos", formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data' // ✅ 明确设置请求头
                    },
                    timeout: 300000, // 5 分钟超时（单位：毫秒）
                    onUploadProgress: (progressEvent) => {
                        this.percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);

                    }
                }).then(res=>{
                    this.form.path = res.data.data;
                    this.$message(res.data.msg)
                    sessionStorage.setItem("video", this.form.path)
                    this.IsShowForm = true

                })
            });

        },

        // watch: {
        //     tags(newVal, oldVal) {
        //         console.log('tags changed:', oldVal, '→', newVal);
        //     }
        // }


    })
    
    // 文件选择处理
    // document.getElementById('fileInput').addEventListener('change', function(e) {
    //     const files = e.target.files;
    //     if(files.length > 0) {
    //         // 在这里处理选择的文件
    //         console.log('已选择文件：', files);
    //         alert(`已选择 ${files.length} 个文件`);
    //
    //         // 可以在此处添加文件上传逻辑
    //     }
    // });


</script>



</html>